<template>
	<div class="page">
		<div class="search">
			<div>
				<div class="back" @click="goback">
					<i class="fa fa-angle-left"></i>
				</div>
			</div>
			<div class="searchBox">
				<form @submit.prevent action="#">
					<input type="search" @keypress="enterSearch" placeholder="搜索当前分类商品" v-model="inputs"
						@click="show1 = true" />
				</form>
			</div>
			<div class="search_icon">
				<i class="iconfont icon-sousuo1"></i>
			</div>
			<div class="search_bth" @click="search">
				<span>搜索</span>
			</div>
			<!-- <div style="position:absolute;right: 1rem;top: 1rem;">
		  <i class="fa fa-th-large" v-show="view" @click="$store.commit('views')"></i>
		  <i class="fa fa-th-list" v-show="!view" @click="$store.commit('views')"></i>
		</div> -->
		</div>
		<div class="box">
			<div class="l" v-if="yjfllist.length!=0">
				<div class="yjflcon">
					<div :class=" item.cli==1?'yjfllistcli':'yjfllist' " v-for="(item,index) in yjfllist" :key="index"
						@click="yjcli(item)">
						{{item.name}}
					</div>
				</div>
			</div>
			<div class="content">
				<div :class=" yjfllist.length==0?'nullyjcontent':'ejcontent'  " ref="ejcontent">
					<div class="list" v-for="(item,index) in rjfllist" :key="index" @click="gotoDetail(item.id)">
						<div class="top_img">
							<img :src="item.thumb" alt="">
						</div>
						<div class="conbot">
							<div class="name">
								{{item.title}}
							</div>
							<div class="price">
								￥{{item.price}}
							</div>
							<div class="num">
								已售{{item.buyNum}}件
							</div>
							<div class="market_price">
								￥{{item.market_price}}
							</div>
						</div>
					</div>
				</div>

			</div>
		</div>
	</div>
</template>

<script>
	import {
		Toast
	} from 'vant'
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {

			return {
				postUrl: 'goods.category.get-goods-list-by-category-id',
				inputs: '',
				yjfllist: [],
				rjfllist: [],
				isLoad: true,
				msg: "正在加载",
				page: 1,
				parent_id: ''
			}
		},
		activated() {
			this.parent_id = this.$route.params.id
			this.getyjfl()
			this.getejfl()
			window.addEventListener("scroll", this.onScroll);
		},
		mounted() {
			//开启滚动事件
			window.onscroll = () => {
				//变量scrollTop是滚动条滚动时，距离顶部的距离
				let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
				//变量windowHeight是可视区的高度
				let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
				//变量scrollHeight是滚动条的总高度
				let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
				//滚动条到底部的条件
				//scrollTop!=0是由于其他功能在body上设置了最小高度100vh，切换tab的时候body高度位100vh。
				if ((Math.ceil(scrollTop + windowHeight) == parseInt(scrollHeight)) && scrollTop != 0) {
					console.log(123)
					this.page++
					$http
						.get("goods.category.get-goods-list-by-category-id", {
							category_id: this.parent_id,
							goods_page: this.page
						})
						.then(res => {
							console.log(res)
							if (res.result == 1) {
								if (res.data.data.length != 0) {
									this.rjfllist = [...this.rjfllist, ...res.data.data]
								} else {
									Toast('没有更多了')
								}
								console.log(this.rjfllist)
							} else {

							}
						});
				}
			}
			// window.addEventListener("scroll", this.onScroll);
		},
		// destroyed() {
		// 	//关闭滚动事件
		// 	window.removeEventListener("scroll", (this.onScroll));
		// },
		// activated() {
		// 	//开启滚动事件
		// 	window.addEventListener("scroll", this.onScroll);
		// },
		deactivated() {
			//关闭滚动事件
			window.onscroll = () => {}
			// window.removeEventListener("scroll", (this.onScroll));
		},
		computed: {
			...mapState(['message', 'blurst', 'view']),

			zoneId() {
				if (this.$store.state.zoneId == '') {
					this.$store.commit('setZoneId', window.localStorage.getItem('zoneId'));
				}

				return this.$store.state.zoneId;
			}
		},
		methods: {
			//跳转至详情
			gotoDetail(id) {
				this.$router.push(this.fun.getUrl("goods", {
					id: id
				}));

			},
			// onScroll() {
			// 	//可滚动容器的高度
			// 	let innerHeight = this.$refs.ejcontent.clientHeight;
			// 	//屏幕尺寸高度
			// 	let outerHeight = document.documentElement.clientHeight;
			// 	//可滚动容器超出当前窗口显示范围的高度
			// 	let scrollTop = document.documentElement.scrollTop;
			// 	//避免切换时读取到异常高度
			// 	if (scrollTop == 5) {
			// 		innerHeight = 10000
			// 	}
			// 	//scrollTop在页面为滚动时为0，开始滚动后，慢慢增加，滚动到页面底部时，出现innerHeight < (outerHeight + scrollTop)的情况，严格来讲，是接近底部。
			// 	if (this.isLoad) {
			// 		console.log(1)
			// 		if (innerHeight <= outerHeight + scrollTop) {
			// 			//此处添加自定义操作
			// 			this.page++
			// 			this.getejfl()
			// 			console.log(11)
			// 		}
			// 	}
			// },
			yjcli(item) {
				this.yjfllist.forEach(it => {
					it.cli = 0
				})
				item.cli = 1
				this.parent_id = item.id
				this.page = 1
				this.rjfllist = []
				this.getejfl()
			},
			getejfl() {
				// this.rjfllist= []
				$http
					.get("goods.category.get-goods-list-by-category-id", {
						category_id: this.parent_id,
						goods_page: this.page
					})
					.then(res => {
						console.log(res)
						if (res.result == 1) {

							if (res.data.data.length != 0) {
								this.rjfllist = res.data.data
							} else {
								Toast('暂无数据！')
							}
							console.log(this.rjfllist)
						} else {

						}
					});
			},
			getyjfl() {
				$http
					.get("goods.category.get-children-category", {
						parent_id: this.parent_id
					})
					.then(res => {
						console.log(res)
						if (res.result === 1) {
							this.yjfllist = res.data.data
							this.yjfllist.forEach(item => {
								this.$set(item, 'cli', 0)
							})
							console.log(this.yjfllist)
						} else {

						}
					});
			},
			enterSearch(event) {
				if (event.keyCode === 13) {
					//如果按的是enter键
					event.preventDefault();
					this.search();
				}
			},
			search() {
				this.rjfllist = [];
				this.gotoSearch(1, false);
			},
			gotoSearch(page = 1, j = true) {
				let srtArr = JSON.parse(this.$route.params.id);

				let json = {
					'search[keyword]': this.inputs,
					page: page,
					'search[category]': this.parent_id,
					// order_field: this.order_field,
					// order_by: this.order_by,
					'search[couponid]': this.$route.params.coupon,
					'search[as_id]': this.zoneId,
					category_id: this.parent_id
				};

				if (this.$route.params.type && this.$route.params.type == 'snatchRegiment') {
					//抢团分类聚合页
					json.art = 'catGoods';
				}
				$http.get(this.postUrl, json, '.').then(
					response => {
						console.log(response)
						if (response.result === 1) {

							if (this.$route.params.type && this.$route.params.type == 'snatchRegiment') {
								this.total_page = response.data.catGoods.goods.last_page;
							} else {
								this.total_page = response.data.last_page;
							}

							if (!this.total_page) {
								this.total_page = 0;
							}
							if (this.$route.params.type && this.$route.params.type == 'snatchRegiment') {
								this.datas.push(...response.data.catGoods.goods.data);
							} else {
								this.rjfllist.push(...response.data.data);
							}
							// 搜索结果为空
							if (this.datas.length <= 0) {
								this.loading = true;
								this.allLoaded = true;
								return;
							}
							// 如果当前页数大于总页数 就不加载了
							// if (response.data.current_page > response.data.last_page) {
							//   this.loading = true;
							//   this.allLoaded = true;
							//   return;
							// }

							this.goods_template = response.data.goods_template;

							// if (response.data.data.length < 20) {
							//   this.loading = true;
							//   this.allLoaded = true;
							//   return;
							// }
							this.isLoading = false;
						} else {
							this.isLoading = false;
							console.log(response);
						}
					});
			},
			goback() {
				localStorage.setItem('isset', 1);
				if (window.history.length <= 1) {
					this.$router.push(this.fun.getUrl('home', {}));
				} else {
					this.$router.go(-1);
				}
			},
		}
	}
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
	.box {
		display: flex;

		.content {
			width: 100%;
      .nullyjcontent{

        // display: flex;
        flex-wrap: wrap;
        // padding-left: 7.5rem;
        padding-top: 3.5rem;
        // justify-content: space-between;
        .list {
        	width: 100%;
        	margin-bottom: 0.1rem;
        	display: flex;
        	background-color: #fff;
        
        	.conbot {
        		padding: 0.4rem;
        		background-color: #fff;
        		text-align: left;
        		// display: flex;
        		// text-align: left;
        		// flex-direction: column;
        		// justify-content: space-between;
        		background-color: #fff;
        
        		// height: 7.5rem;
        		.market_price {
        			font-size: 0.5rem;
        			color: #D1D1D2;
        			text-decoration: line-through;
        		}
        
        		.num {
        			font-size: 0.5rem;
        			color: #D1D1D2;
        		}
        
        		.price {
        			color: #f00;
        			// margin-top: 1rem;
        		}
        
        		.name {}
        	}
        
        	.top_img {
        		margin-right: 0.5rem;
        
        		img {
        			width: 6rem;
        			height: 6rem;
        		}
        	}
        }
      }
			.ejcontent {

				// display: flex;
				flex-wrap: wrap;
				padding-left: 7.5rem;
				padding-top: 3.5rem;
				// justify-content: space-between;

				.list {
					width: 100%;
					margin-bottom: 0.1rem;
					display: flex;
					background-color: #fff;

					.conbot {
						padding: 0.4rem;
						background-color: #fff;
						text-align: left;
						// display: flex;
						// text-align: left;
						// flex-direction: column;
						// justify-content: space-between;
						background-color: #fff;

						// height: 7.5rem;
						.market_price {
							font-size: 0.5rem;
							color: #D1D1D2;
							text-decoration: line-through;
						}

						.num {
							font-size: 0.5rem;
							color: #D1D1D2;
						}

						.price {
							color: #f00;
							// margin-top: 1rem;
						}

						.name {}
					}

					.top_img {
						margin-right: 0.5rem;

						img {
							width: 6rem;
							height: 6rem;
						}
					}
				}
			}
		}

		.l {
			position: fixed;
			left: 0;
			background-color: #fff;
			height: 100%;
			text-align: center;
			width: 30%;
			top: 3rem;

			.yjflcon {
				.yjfllistcli {
					line-height: 3rem;
					color: #000;
					border-left: 0.1rem solid #f00;
				}

				.yjfllist {
					line-height: 3rem;
					color: #999;
				}
			}
		}
	}

	// 弹窗样式
	#search {
		.showmoretype {
			height: 5.5rem !important;
		}

		.icon {
			display: inline-block;
			width: 0.5rem;
			height: 0.5rem;
			border: solid 0.0625rem #000;
			border-left: transparent;
			border-bottom: transparent;
			transform: rotate(135deg);
			margin-left: 0.1875rem;
			position: relative;
			top: -0.125rem;
		}

		.color {
			border: solid 0.0625rem #ff5e53;
			background: #fff !important;
			color: #ff5e53;
		}

		.btn {
			width: 23%;
			height: 26px;
			border: solid 0.0625rem #fff;
			border-radius: 0.25rem;
			margin: 0 0.3125rem;
		}

		.top-tab {
			padding: 0 0.875rem;
			display: flex;
			justify-content: space-between;
			height: 2.8125rem;
			line-height: 2.8125rem;

			.search-text {
				font-size: 14px;
			}

			.search-box {
				margin: 0 1rem;
				padding: 0 1rem;
				display: flex;
				justify-content: space-between;
				margin-top: 0.5rem;
				height: 1.875rem;
				background-color: #f2f2f2;
				border-radius: 0.9375rem;
				flex: 2;

				input {
					flex: 3;
					border: none;
					color: #8c8c8c;
				}

				i {
					line-height: 1.875rem;
				}
			}
		}

		.age {
			.select {
				color: rgb(255, 94, 83);
			}

			text-align: left;

			li {
				height: 2.75rem;
				line-height: 2.75rem;
				border-bottom: solid 0.0625rem #e2e2e2;
				padding: 0 0.875rem;
				font-size: 14px;
			}
		}

		.middle {
			padding: 0.625rem 0;
			border-bottom: solid 0.0625rem #e2e2e2;

			ul {
				display: flex;
				justify-content: space-between;
				padding: 0 0.875rem;
				line-height: 2.25rem;
				height: 2.25rem;

				span {
					color: #8c8c8c;
				}

				i {
					font-size: 18px;
					color: #c9c9c9;
					margin-left: 0.375rem;
				}
			}

			.button {
				padding: 0 0.875rem;

				.first,
				.second {
					display: flex;
					margin-top: 0.625rem;
					margin-bottom: 0.625rem;

					button:first-child {
						margin-right: 0.3125rem;
					}

					button:last-child {
						margin-left: 0.3125rem;
					}

					button:nth-child(2),
					button:nth-child(3) {
						margin: 0 0.3125rem;
					}

					button {
						width: 23%;
						height: 1.625rem;
						border: solid 0.0625rem #e2e2e2;
						border-radius: 0.25rem;
					}
				}
			}
		}

		.bottom {
			padding: 0 0.875rem;
			margin-top: 0.625rem;
			margin-bottom: 0.625rem;

			.button {
				display: flex;
				justify-content: flex-end;

				button {
					width: 23%;
					height: 1.625rem;
					border: solid 0.0625rem #e2e2e2;
					border-radius: 0.25rem;
				}

				button:first-child {
					margin-right: 0.3125rem;
				}

				button:last-child {
					margin-left: 0.3125rem;
				}

				#complete {
					background-color: #ff5e53;
					color: #fff;
					border: none;
				}
			}
		}

		.brand {
			.hot {
				h1 {
					height: 1.875rem;
					line-height: 1.875rem;
					text-align: left;
					padding: 0 0.875rem;
					font-size: 14px;
					background-color: #f5f5f5;
					color: #8c8c8c;
					margin-bottom: 0.625rem;
				}

				ul {
					display: flex;
					flex-wrap: wrap;

					li {
						width: 25%;
						margin: 0.625rem 0;

						span {
							font-size: 12px;
						}
					}
				}
			}
		}
	}

	// 弹窗样式结束
	#search {
		.osll {
			min-height: 100vh;
			margin-top: 1.75rem;
			box-sizing: border-box;
		}

		// 	@descendent wrapper {
		//     overflow: scroll;
		// }
		.page-loadmore-wrapper2 {
			height: 100vh;
			overflow: hidden;
		}

		.uou {
			position: fixed;
			z-index: 99;
			top: 0;
			transition: 0.2s;
			-webkit-transition: 0.2s;
			width: 100%;
			background: #fff;
		}

		.mout {
			top: -2.8125rem;
		}
	}

	.search {
		position: fixed;
		top: 0;
		width: 100%;

		.back {
			width: 2.8125rem;

			i {
				line-height: 2.8125rem;
				font-size: 1.5rem;
			}
		}

		overflow: hidden;
		background: #fff;
		border-bottom: 0.0625rem solid #f5f5f5;
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;

		.mint-button.mint-button--default {
			/* float: left; */

			/* width: 10%; */
			border: none;
			padding-top: 0.4rem;
			box-shadow: none;
		}

		.searchBox {
			position: relative;
			font-size: 14px;
			display: inline-table;
			float: left;
			width: 70%;
			// margin-left: -1.5rem;
			height: 1.875rem;
			background: #f2f2f2;
			border-radius: 1rem;

			input {
				vertical-align: middle;
				border: none;
				box-sizing: border-box;
				outline: 0;
				padding: 0 1rem;
				height: 1.875rem;
				line-height: 1.875rem;
				color: #8c8c8c;
				font-size: 14px;
				width: 14rem;
				border-radius: 0.9375rem;
				z-index: 10;

				/* margin-left: 2rem; */
			}
		}

		.search_bth {
			width: 3.75rem;
			height: 2.8125rem;
			line-height: 2.8125rem;

			span {
				font-size: 16px;
				color: #333;
			}
		}

		.search_icon {
			position: absolute;
			left: 3.75rem;
			height: 2.8125rem;

			i {
				line-height: 2.8125rem;
				color: #999;
				font-size: 1rem;
			}
		}
	}

	.sort_box {
		height: 2.5rem;
		line-height: 2.5rem;
		display: flex;
		background: #fff;
		border-top: solid 0.0625rem #ebebeb;
		border-bottom: solid 0.0625rem #ebebeb;

		.sort_a,
		.sort_b,
		.sort_c {
			width: 6.9787rem;
			display: flex;
			justify-content: center;
			position: relative;
			font-size: 15px;

			li {
				display: flex;

				i {
					font-size: 12px;
					margin-left: 0.375rem;
					color: #999;
				}

				.icon-up {
					margin-top: -0.1875rem;
				}

				.icon-down {
					position: absolute;
					right: 2rem;
					top: 0.25rem;
				}
			}
		}

		.sort_icon {
			width: 2.5rem;
			height: 2.5rem;

			i {
				font-size: 1.5rem;
				color: #666;
			}
		}

		.hascolor {
			color: #f15353 !important;
		}
	}
</style>
